
<div class="layui-tab page-content-wrap">
    <ul class="layui-tab-title">
        <li class="layui-this">邮件配置</li>
        <li>邮件测试</li>
    </ul>
    <div class="layui-tab-content">
        <!--邮件配置-->
        <div class="layui-tab-item layui-show">
            <form class="layui-form  layui-form-pane" onsubmit="return false;" style="width: 90%;padding-top: 20px;">

                <div class="layui-form-item">
                    <label class="layui-form-label">Smtp服务器</label>
                    <div class="layui-input-inline">
                        <input autocomplete="off" class="layui-input" lay-verify="required" name="MailSmtp" placeholder="如ssl://smtp.qq.com"
                               type="text" value="">
                    </div>
                    <div class="layui-form-mid layui-word-aux">建议使用QQ邮箱，采用ssl通信的邮箱需要加上ssl协议标记</div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">Smtp端口</label>
                    <div class="layui-input-inline">
                        <input autocomplete="off" class="layui-input" lay-verify="required" name="MailPort" placeholder="例如465"
                               type="text">
                    </div>
                    <div class="layui-form-mid layui-word-aux">QQ邮箱使用的是465端口，其他服务商邮箱请咨询邮件服务商</div>
                </div>


                <div class="layui-form-item">
                    <label class="layui-form-label">发信邮箱</label>
                    <div class="layui-input-inline">
                        <input autocomplete="off" class="layui-input" name="MailSend" placeholder="请输入发信邮箱" type="text">
                    </div>
                    <div class="layui-form-mid layui-word-aux">发送邮件的邮箱</div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">发信密码</label>
                    <div class="layui-input-inline">
                        <input autocomplete="off" class="layui-input" name="MailPass" placeholder="请输入密码"
                               type="password">

                    </div>
                    <div class="layui-form-mid layui-word-aux">QQ邮箱请使用<a href="https://service.mail.qq.com/cgi-bin/help?subtype=1&&no=1001256&&id=28" target="_blank">授权码</a></div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">收信邮箱</label>
                    <div class="layui-input-inline">
                        <input autocomplete="off" class="layui-input" name="MailRec" placeholder="请输入收信邮箱" type="text">
                    </div>
                    <div class="layui-form-mid layui-word-aux">通知自己的邮箱，不要和上面的通信邮箱设置成一样</div>
                </div>


                <div class="layui-form-item">
                    <label class="layui-form-label">邮件通知</label>
                    <div class="layui-input-block">
                        <input lay-filter="me" name="MailNoticeMe" title="监控掉线提醒" type="checkbox">
                        <input lay-filter="you" name="MailNoticeYou" title="收款到账提醒" type="checkbox">
                    </div>
                </div>
                <div class="layui-form-item">
                    <button class="layui-btn" lay-filter="mailInfo" lay-submit="">保存设置</button>
                    <button class="layui-btn layui-btn-primary" type="reset">重置</button>
                </div>
            </form>
        </div>
        <!--邮件测试-->
        <div class="layui-tab-item">
            <form class="layui-form  layui-form-pane" style="width: 90%;padding-top: 20px;">
                <div class="layui-form-item">
                    <button class="layui-btn" lay-filter="mailSend" lay-submit="">发送邮件</button>
                </div>
                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">测试结果</label>
                    <div class="layui-input-block">
                        <div id="testresult"
                             style="height:264px; padding:10px; border:1px dashed #ccc; overflow:auto;"></div>
                    </div>
                </div>


            </form>

        </div>

    </div>

</div>

<script>
    //Demo
    layui.use(['form', 'element'], function () {
        var form = layui.form;
        var element = layui.element;
        var $ = layui.jquery;

        form.on('checkbox(me)', function (data) {
            data.elem.value = data.elem.checked ? 'on' : "off";
            return false;
        });
        form.on('checkbox(you)', function (data) {
            data.elem.value = data.elem.checked ? 'on' : "off";
            return false;
        });
        form.render();
        //监听信息提交
        form.on('submit(mailInfo)', function (data) {
            data.field.MailNoticeMe = $("input[name='MailNoticeMe']").val();
            data.field.MailNoticeYou = $("input[name='MailNoticeYou']").val();

            $.ajax({
                url: '<{url m="admin" c="Mail" a="Set"}>',
                type: 'POST',
                data:data.field,
                success:function (data) {
                    data=JSON.parse(data);
                    if(data.state) layer.msg('保存成功',{icon:6});
                    else layer.msg(data.msg,{icon:5});
                }
            });

            return false;
        });
        //监听seo提交
        form.on('submit(mailSend)', function (data) {
            $.ajax({
                url: '<{url m="admin" c="Mail" a="Test"}>',
                type: 'POST',
                success: function (data) {
                    $("#testresult").html(data);

                }
            });
            return false;
        });

        function GetData() {
            $.ajax({
                url: '<{url m="admin" c="Mail" a="Get"}>',
                type: 'GET',
                success: function (data) {
                    data = JSON.parse(data);
                    if (data.state) {

                        $("input[name='MailSmtp']").val(data.data.MailSmtp);
                        $("input[name='MailPort']").val(data.data.MailPort);
                        $("input[name='MailSend']").val(data.data.MailSend);


                        $("input[name='MailPass']").val(data.data.MailPass);
                        $("input[name='MailRec']").val(data.data.MailRec);


                        var o = $("input[name='MailNoticeMe']");

                        if (data.data.MailNoticeMe === "on") {
                            o.prop('checked', 'checked');
                            o.val('on');
                        } else {
                            o.removeAttr('checked');
                            o.val('off');
                        }

                        var p = $("input[name='MailNoticeYou']");

                        if (data.data.MailNoticeYou === "on") {
                            p.prop('checked', 'checked');
                            p.val('on');
                        } else {
                            p.removeAttr('checked');
                            p.val('off');
                        }


                        form.render();
                    }

                }
            });
        }

        GetData();

    });

</script>